<template>
    <div class="alldoc_model">
        <div class="top_panel">
            <div class="search_box">
                <i class="el-icon-search"></i>
                <input type="text" placeholder="搜索标题/正文/创始人">
            </div>
            <div class="user_area">
                <span @click="userInfo('qs')"><i class="el-icon-question"></i></span>
                <span @click="userInfo('ms')"><i class="el-icon-message-solid"></i></span>
                <span @click="userInfo('us')"><i class="el-icon-user-solid"></i></span>
            </div>
        </div>
        <div class="content_panel">
            <!-- 快捷方式文档 -->
            <div class="shortcut_doc_list">
                <div class="short_title">
                    <span class="pull-left">快捷方式文档</span>
                    <span class="pull-right"><i class="el-icon-s-fold"></i></span>
                </div>
                <div class="short_list">
                    <ul>
                        <li v-for="(item,index) in shortcutList" :key="index" @click="open">
                            <span class="list_img">
                                <img src="./images/全屏表格-编辑@2x.png" alt="">
                            </span>
                            <span class="list_title">
                                <img data-v-afa1be52="" src="/img/全屏表格-编辑@2x.74c6ea72.png" width="12" height="14" alt="">
                                <i class="el-icon-star-on"></i>
                                <span>{{item.title}}</span>
                                <p class=""></p>
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 所有文档 -->
            <div class="all_doc_list">
                <div class="all_title">
                    <span class="pull-left">所有文档</span>
                    <span class="pull-right"><i class="el-icon-s-fold"></i></span>
                </div>
                <div class="operate_box">
                    <ul>
                        <li>
                            <span>操作</span><i class="el-icon-caret-bottom"></i>
                        </li>
                        <li>
                            <i class="el-icon-delete-solid"></i><span>删除</span>
                        </li>
                        <li>
                            <i class="el-icon-circle-plus"></i><span>新建</span>
                        </li>
                        <li>
                            <i class="el-icon-download"></i><span>导入</span>
                        </li>
                        <li>
                            <i class="el-icon-download"></i><span>更新时间</span>
                        </li>
                    </ul>
                </div>
                <div class="all_table">
                    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="title" label="名称" width="300"></el-table-column>
                        <el-table-column prop="user" label="所有者" width="300"></el-table-column>
                        <el-table-column label="最后更新时间">
                            <template slot-scope="scope">{{ scope.row.date }}</template>
                        </el-table-column>
                        <el-table-column label="" width="50px">
                            <template>
                                <p class="oprate"></p>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'alldoc',
    data() {
        return {
            shortcutList: [
                {
                    title: '新媒体小组iTable研发项目排期表'
                },
                {
                    title: '新媒体小组iTable研发项目排期表'
                },
                {
                    title: '新媒体小组iTable研发项目排期表'
                },
                {
                    title: '新媒体小组iTable研发项目排期表'
                }
            ],
            tableData: [{
                    id: 1,
                    date: '2019-12-7 14:40:22',
                    user: '地方媒体事业部',
                    title: '新媒体iTable研发项目排期表'
                }, {
                    id: 2,
                    date: '2019-12-7 14:40:22',
                    user: '地方媒体事业部',
                    title: '新媒体iTable研发项目排期表'
                }, {
                    id: 3,
                    date: '2019-12-7 14:40:22',
                    user: '地方媒体事业部',
                    title: '新媒体iTable研发项目排期表',
                    children: [{
                        id: 31,
                        date: '2019-12-7 14:40:22',
                        user: '地方媒体事业部',
                        title: '新媒体iTable研发项目排期表'
                    }, {
                        id: 32,
                        date: '2019-12-7 14:40:22',
                        user: '地方媒体事业部',
                        title: '新媒体iTable研发项目排期表'
                    }]
                }, {
                    id: 32,
                    date: '2019-12-7 14:40:22',
                    user: '地方媒体事业部',
                    title: '新媒体iTable研发项目排期表'
            }],
        }
    },
    methods: {
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        open() {
            this.$message({
                message: '恭喜，你打开了一个表格',
                type: 'success'
            });
        },
        userInfo(type) {
            this.$notify.info({
                title: '消息',
                message: type == 'qs' ? '这里是说明' : type == 'ms' ? '这里是消息提示' : '这里是用户信息'
            });
        }
    },
}
</script>

<style lang="less" scoped>
@import url('./css/alldoc.less');
</style>


